<template>
  <div class="tab">
    <div v-for="(item, index) in tabList" :key="index" @click="tabClick(item.id)"
      :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (28 / 96) + 'rem', marginLeft: (35 / 96) + 'rem', marginRight: (35 / 96) + 'rem', cursor: 'pointer' }">
      <span
        :style="{ fontSize: (26 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: 'bold', color: tabId == item.id ? activeColor : noActiveColor, lineHeight: (24 / 96) + 'rem' }">{{
        item.title }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Tab',
    props: {
      activeColor: {
        type: String,
        default () {
          return "#333333"
        }
      },
      noActiveColor: {
        type: String,
        default () {
          return "#999999"
        }
      },
      tabId: {
        type: Number,
        default () {
          return 0;
        }
      },
      tabList: {
        type: Array,
        default () {
          return [];
        }
      }
    },
    data () {
      return {

      }
    },
    methods: {
      tabClick (id) {
        this.$emit("tabClick", id);
      }
    }
  }
</script>

<style scoped>
  .tab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>